<template>
  <div class="timeline-container">
    <HomeHeader />
    <div class="timeline-content">
      <!-- 时间轴 -->
      <div class="timeline">
        <!-- 按年份分组显示文章 -->
        <div v-for="(articles, year) in groupedArticles" :key="year" class="year-section">
          <h2 class="year">{{ year }}</h2>
          <div class="timeline-items">
            <div v-for="(article, index) in articles" :key="article.id" class="timeline-item">
              <div class="timeline-point"></div>
              <div class="timeline-card" :style="{ animationDelay: `${index * 0.2}s` }" @click="router.push(`/blog/${article.id}`)">
                <img :src="article.cover" :alt="article.title" class="article-cover">
                <div class="article-info">
                  <h3 class="article-title">{{ article.title }}</h3>
                  <div class="article-date">{{ article.date }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <Pagination
          v-model="currentPage"
          :total="total"
          :page-size="pageSize"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import HomeHeader from '@/components/home-header.vue'
import Pagination from '@/components/pagination.vue'

const router = useRouter()
const currentPage = ref(1)
const pageSize = ref(5)
const total = computed(() => articles.value.length)

// 模拟文章数据
const articles = ref([
  {
    id: 1,
    title: '半年隔绝, 归来已是"前端新时代"',
    date: '2025-02-13 18:13:27',
    cover: 'https://luokangyuan.com/upload/2022/06/pexels-heather-bozman-1058770.jpg'
  },
  {
    id: 2,
    title: 'Docker的坑',
    date: '2024-12-11 01:09:18',
    cover: 'https://luokangyuan.com/upload/2022/06/pexels-kaboompics-com-6224.jpg'
  },
  {
    id: 3,
    title: '如何处理Promise.reject返回的数据',
    date: '2024-08-16 10:47:54',
    cover: 'https://luokangyuan.com/upload/2022/06/pexels-pixabay-268533.jpg'
  },
  {
    id: 4,
    title: '闲来无事 我又写了一款旋转菜单',
    date: '2024-07-11 22:44:39',
    cover: 'https://luokangyuan.com/upload/2022/06/pexels-artem-beliaikin-1079033.jpg'
  },
  {
    id: 5,
    title: 'vue2/3如何快速重置表单数据',
    date: '2024-06-04 15:04:47',
    cover: 'https://luokangyuan.com/upload/2022/06/pexels-pixabay-414630.jpg'
  },
  {
    id: 6,
    title: 'vue2/3如何快速重置表单数据',
    date: '2025-06-04 15:04:47',
    cover: 'https://luokangyuan.com/upload/2022/06/pexels-james-wheeler-417074.jpg'
  }
])

// 获取当前页的文章
const currentPageArticles = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return articles.value.slice(start, end)
})

// 按年份分组文章 - 修改为使用当前页文章
const groupedArticles = computed(() => {
  const groups = {}
  currentPageArticles.value.forEach(article => {
    const year = article.date.split('-')[0]
    if (!groups[year]) {
      groups[year] = []
    }
    groups[year].push(article)
  })
  // 按年份降序排序
  return Object.fromEntries(
    Object.entries(groups).sort((a, b) => b[0] - a[0])
  )
})
</script>

<style scoped>
.timeline-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-top: 56px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline-content {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 10px;
  flex: 1;
}

.timeline {
  position: relative;
  padding-left: 50px;
  width: 100%;
}

/* 时间轴垂直线 */
.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #409eff;
}

.timeline-items {
  width: 100%;
}

.year-section {
  margin-bottom: 40px;
}

.year {
  color: #409eff;
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: 500;
}

.timeline-item {
  position: relative;
  margin-bottom: 30px;
}

/* 时间点 */
.timeline-point {
  position: absolute;
  left: -54px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #409eff;
  border: 2px solid #fff;
}

.timeline-card {
  width: 100%;
  background: #fff;
  border-radius: 8px;
  padding: 20px 30px;
  display: flex;
  gap: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: transform 0.3s ease;
  animation: cardAppear 0.8s ease-out forwards;
  opacity: 0;
  transform: scale(0.8);
  filter: blur(10px);
}

@keyframes cardAppear {
  0% {
    opacity: 0;
    transform: scale(0.8);
    filter: blur(10px);
  }
  
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.timeline-card:hover {
  transform: translateY(-3px);
}

.article-cover {
  width: 180px;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
  transition: transform 0.5s ease;
  transform-origin: center;
}

.timeline-card:hover .article-cover {
  animation: zoomInOut 1s ease;
}

@keyframes zoomInOut {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.article-info {
  flex: 1;
}

.article-title {
  font-size: 16px;
  color: #333;
  margin: 0 0 10px;
  font-weight: normal;
}

.article-date {
  font-size: 14px;
  color: #999;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .timeline-content {
    padding: 15px;
    max-width: 100%;
  }

  .timeline {
    padding-left: 30px;
  }

  .timeline-card {
    padding: 15px;
    gap: 15px;
  }

  .article-cover {
    width: 80px;
    height: 60px;
  }

  .article-title {
    font-size: 14px;
  }
}
</style>
